<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary-color: #64748b;
            --success-color: #059669;
            --warning-color: #d97706;
            --danger-color: #dc2626;
            --light-bg: #f8fafc;
            --chat-bg: #ffffff;
            --user-msg-bg: #2563eb;
            --ai-msg-bg: #f1f5f9;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--light-bg);
            height: 100vh;
            overflow: hidden;
        }
        
        .navbar {
            background: white;
            box-shadow: var(--card-shadow);
            z-index: 1000;
        }
        
        .chat-container {
            height: calc(100vh - 76px);
            display: flex;
            flex-direction: column;
        }
        
        .chat-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 1.5rem;
            border-radius: 0;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            background: var(--chat-bg);
        }
        
        .message {
            margin-bottom: 1.5rem;
            display: flex;
            align-items: flex-start;
        }
        
        .message.user {
            justify-content: flex-end;
        }
        
        .message-content {
            max-width: 70%;
            padding: 1rem 1.25rem;
            border-radius: 18px;
            position: relative;
            word-wrap: break-word;
        }
        
        .message.user .message-content {
            background: var(--user-msg-bg);
            color: white;
            border-bottom-right-radius: 6px;
        }
        
        .message.ai .message-content {
            background: var(--ai-msg-bg);
            color: #1f2937;
            border-bottom-left-radius: 6px;
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            margin: 0 0.75rem;
        }
        
        .message.user .message-avatar {
            background: var(--primary-color);
            color: white;
            order: 2;
        }
        
        .message.ai .message-avatar {
            background: var(--success-color);
            color: white;
        }
        
        .chat-input-container {
            background: white;
            padding: 1.5rem;
            border-top: 1px solid #e2e8f0;
        }
        
        .chat-input {
            border: 2px solid #e2e8f0;
            border-radius: 25px;
            padding: 0.75rem 1.25rem;
            resize: none;
            transition: all 0.3s ease;
        }
        
        .chat-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .send-btn {
            background: var(--primary-color);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .send-btn:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }
        
        .send-btn:disabled {
            background: #cbd5e1;
            transform: none;
        }
        
        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 1rem 1.25rem;
            background: var(--ai-msg-bg);
            border-radius: 18px;
            border-bottom-left-radius: 6px;
            max-width: 70%;
        }
        
        .typing-dots {
            display: flex;
            gap: 4px;
        }
        
        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--secondary-color);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing {
            0%, 60%, 100% {
                transform: translateY(0);
                opacity: 0.4;
            }
            30% {
                transform: translateY(-10px);
                opacity: 1;
            }
        }
        
        .quick-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }
        
        .quick-action-btn {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 20px;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            color: var(--secondary-color);
            transition: all 0.3s ease;
        }
        
        .quick-action-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: #eff6ff;
        }
        
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--secondary-color);
        }
        
        .empty-state-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }
        
        @media (max-width: 768px) {
            .message-content {
                max-width: 85%;
            }
            
            .chat-messages {
                padding: 1rem;
            }
            
            .chat-input-container {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="/" style="color: var(--primary-color);">
                <i class="fas fa-brain me-2"></i>
                SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/resume-analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500 active" href="/chat" style="color: var(--primary-color);">智能对话</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/job-matching">岗位匹配</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 聊天容器 -->
    <div class="chat-container">
        <!-- 聊天头部 -->
        <div class="chat-header">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <div class="d-flex align-items-center justify-content-center" 
                             style="width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 50%;">
                            <i class="fas fa-robot" style="font-size: 1.5rem;"></i>
                        </div>
                    </div>
                    <div>
                        <h4 class="mb-1 fw-600">AI 简历助手</h4>
                        <p class="mb-0 opacity-75">基于您的简历内容提供个性化建议</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chatMessages">
            <!-- 空状态 -->
            <div class="empty-state" id="emptyState">
                <div class="empty-state-icon">
                    <i class="fas fa-comments"></i>
                </div>
                <h5 class="fw-600 mb-3">开始与AI助手对话</h5>
                <p class="mb-4">您可以询问关于简历优化、职业发展、面试技巧等问题</p>
                
                <!-- 快捷操作 -->
                <div class="quick-actions justify-content-center">
                    <button class="quick-action-btn" onclick="sendQuickMessage('如何优化我的简历？')">
                        <i class="fas fa-file-alt me-1"></i>
                        简历优化建议
                    </button>
                    <button class="quick-action-btn" onclick="sendQuickMessage('我应该如何准备面试？')">
                        <i class="fas fa-user-tie me-1"></i>
                        面试准备
                    </button>
                    <button class="quick-action-btn" onclick="sendQuickMessage('我的技能匹配哪些岗位？')">
                        <i class="fas fa-search me-1"></i>
                        岗位匹配
                    </button>
                    <button class="quick-action-btn" onclick="sendQuickMessage('如何提升我的竞争力？')">
                        <i class="fas fa-chart-line me-1"></i>
                        职业发展
                    </button>
                </div>
            </div>

            <!-- 消息将在这里动态添加 -->
        </div>

        <!-- 输入区域 -->
        <div class="chat-input-container">
            <div class="container-fluid">
                <div class="d-flex align-items-end gap-3">
                    <div class="flex-grow-1">
                        <textarea class="form-control chat-input" 
                                  id="messageInput" 
                                  placeholder="输入您的问题..." 
                                  rows="1"
                                  onkeypress="handleKeyPress(event)"></textarea>
                    </div>
                    <button class="send-btn" id="sendBtn" onclick="sendMessage()">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 聊天功能JS -->
    <script>
        let isTyping = false;
        
        function handleKeyPress(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendMessage();
            }
        }
        
        function sendQuickMessage(message) {
            document.getElementById('messageInput').value = message;
            sendMessage();
        }
        
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (!message || isTyping) return;
            
            // 隐藏空状态
            document.getElementById('emptyState').style.display = 'none';
            
            // 添加用户消息
            addMessage(message, 'user');
            
            // 清空输入框
            input.value = '';
            
            // 显示AI正在输入
            showTypingIndicator();
            
            // 发送到后端
            fetch('/chat/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: message })
            })
            .then(response => response.json())
            .then(data => {
                hideTypingIndicator();
                addMessage(data.response, 'ai');
            })
            .catch(error => {
                hideTypingIndicator();
                addMessage('抱歉，服务暂时不可用，请稍后再试。', 'ai');
                console.error('Error:', error);
            });
        }
        
        function addMessage(content, type) {
            const messagesContainer = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            
            const avatar = document.createElement('div');
            avatar.className = 'message-avatar';
            avatar.innerHTML = type === 'user' ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>';
            
            const messageContent = document.createElement('div');
            messageContent.className = 'message-content';
            messageContent.textContent = content;
            
            messageDiv.appendChild(avatar);
            messageDiv.appendChild(messageContent);
            
            messagesContainer.appendChild(messageDiv);
            
            // 滚动到底部
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        function showTypingIndicator() {
            isTyping = true;
            document.getElementById('sendBtn').disabled = true;
            
            const messagesContainer = document.getElementById('chatMessages');
            const typingDiv = document.createElement('div');
            typingDiv.className = 'message ai';
            typingDiv.id = 'typingIndicator';
            
            const avatar = document.createElement('div');
            avatar.className = 'message-avatar';
            avatar.innerHTML = '<i class="fas fa-robot"></i>';
            
            const typingContent = document.createElement('div');
            typingContent.className = 'typing-indicator';
            typingContent.innerHTML = `
                <div class="typing-dots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
                <span class="ms-2 text-muted">AI正在思考...</span>
            `;
            
            typingDiv.appendChild(avatar);
            typingDiv.appendChild(typingContent);
            
            messagesContainer.appendChild(typingDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        function hideTypingIndicator() {
            isTyping = false;
            document.getElementById('sendBtn').disabled = false;
            
            const typingIndicator = document.getElementById('typingIndicator');
            if (typingIndicator) {
                typingIndicator.remove();
            }
        }
        
        // 自动调整输入框高度
        document.getElementById('messageInput').addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });
    </script>
</body>
</html>